$(function () {
    // resize函数的作用是根据屏幕的宽度决定轮播图应该是大图还是小图
    function resize() {
        var windowWidth=$(window).width();//获取屏幕的宽度
        //判断屏幕属于大或者小
        var isSmallScreen=windowWidth<768;
        //根据大小为界面上的每一张轮播图设置背景
        $("#main_ad>.carousel-inner>.item").each(function (i,item) {
            var $item=$(item);
            // $element.data()是一个函数,专门取元素上的自定义属性(data-xx)
            // var imgSrc=$item.data(isSmallScreen?'img-xm':'img-lg');
            var imgSrc=isSmallScreen?$item.data('img-xm'):$item.data('img-lg');
            //设置背景图片
            $item.css('backgroundImage','url("'+imgSrc+'")');
           if (isSmallScreen) {
               $item.html('<img src="'+imgSrc+'">');
           }else {
               $item.html('');
           }
        });
        //控制ul的宽度 ul-wrapper
        var $ulContainer=$('.nav-tabs');//获取ul
        var width=30;
        //遍历所有的li的宽度 然后累加
        // console.log($ulContainer.children());
        $ulContainer.children().each(function (i,element) {
            // console.log( $(element).width());
            width+= $(element).width();

        });
        //此时width等于所有li的宽度的总和
        // console.log(width);
        //判断当前Ul的宽度是否超出屏幕，如果超出就显示横向滚动条
        if (width>$(window).width()){
            $ulContainer.css('width',width).parent().css('overflow-x','scroll');

        }
    }

    $(window).on('resize',resize).trigger('resize');
    //初始化bootstrap 下的 tooltips 插件
    $('[data-toggle="tooltip"]').tooltip();//京沪工具提示需要调一下这个函数才能出现效果 在提示的上方显示内容

//给news下的每一个a注册点击事件
    var $newTitle=$('.new-title');
    $('#news .nav-pills a').on('click',function () {
        //获取当前点击元素
        var $this=$(this);
        //获取对应的title值
        var title=$this.data('title');
        //将title的值添加到news下new-title 新闻资讯
        $newTitle.text(title);
    });

//1.获取手指在轮播图元素上的一个滑动方向(左右)
    //手指触摸开始记录一下 手指所在的坐标x 结束触摸一瞬间记录的手指的所在坐标x  比大小
    var $carousels=$('.carousel');  //获取界面上的轮播图容器
    var startX,endX;
    var offset=50;
    //注册轮播事件
    $carousels.on('touchstart',function (e) {
//手指触摸开始记录一下 手指所在的坐标x
        // console.log(e.originalEvent.touches[0].clientX);
       startX= e.originalEvent.touches[0].clientX;
        // console.log(startX);
    });
//结束触摸一瞬间记录的手指的所在坐标x
    $carousels.on('touchmove',function (e) {
        //手指触摸结束记录一下 手指所在的坐标x
        // console.log(e.originalEvent.touches[0].clientX);
        endX= e.originalEvent.touches[0].clientX;// 变量重复赋值 取的是最后一个值
        console.log(endX);
    });
//比较开始与结束的大小
    $carousels.on('touchmove',function (e) {
    //控制精度 获取每次运动的距离当距离大于一定值时 认为是有方向的变化
        var distance=Math.abs(startX-endX);
        if (distance>offset){
            // console.log(startX>endX?'<--':'-->');//有方向的变化
//2.根据获得到的方向选择上一张或者下一张
            $(this).carousel(startX>endX?'next':'prev');
        }
    });
});